<template>
  <div class="business-org-config">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name" />
    </el-tabs>
    <transition name="fade">
      <component :is="activeCom" />
    </transition>
  </div>
</template>

<script>
  import Warehouse from '@/modules/config/components/businessOrgCom/Warehouse.vue'
  import PurchasingOrg from '@/modules/config/components/businessOrgCom/PurchasingOrg.vue'
  import PurchasingGroup from '@/modules/config/components/businessOrgCom/PurchasingGroup.vue'

  export default {
    name: 'BusinessOrgConfig',
    components: {
      Warehouse,
      PurchasingOrg,
      PurchasingGroup
    },
    data() {
      return {
        tabs: [
          {
            name: 'Warehouse',
            label: '仓库信息',
            component: 'Warehouse'
          },
          {
            name: 'PurchasingOrg',
            label: '采购组织',
            component: 'PurchasingOrg'
          },
          {
            name: 'PurchasingGroup',
            label: '采购组',
            component: 'PurchasingGroup'
          }
        ],
        activeName: 'Warehouse',
        activeCom: 'Warehouse',
        activePermi: []
      }
    },
    watch: {
      activeName(val) {
        for (const tab of this.tabs) {
          if (tab.name === val) {
            this.activeCom = tab.component
            this.activePermi = tab.permission
            break
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .business-org-config {
    height: 100%;
    border-radius: 4px;
    box-sizing: border-box;
  }

  ::v-deep .el-tabs__header.is-top {
    background-color: #fff;
    margin-bottom: 0;
    border-radius: 4px 4px 0 0;
  }
  ::v-deep .el-tabs__nav.is-top {
    border-radius: 0;
    border-top: none !important;
  }
  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: transparent;
  }
  ::v-deep .x-filter-container {
    border-radius: 0 0 4px 4px;
  }
  .el-tabs {
  }
  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 1px solid #ebebeb;
  }
  ::v-deep.el-tab-pane {
    height: 100%;
  }
  ::v-deep .x-page-container {
    height: calc(100% - 40px);
  }
  .fade-enter-active {
    transition: all 0.2s linear 0.15s;
    opacity: 1;
    transform: translateX(0px);
  }

  .fade-leave-active {
    transition: all 0.15s linear;
    opacity: 0.4;
    transform: translateX(30px);
  }

  .fade-enter {
    opacity: 0.2;
    transform: translateX(-30px);
  }

  .fade-leave-to {
    opacity: 0.1;
    transform: translateX(0);
  }
</style>
